<template>
  <view class="sliderRight">
    <uni-transition :mode-class="['slide-right']" :styles="transClass" :show="isShow">
      <view class="mask" @click="onTap">
        <view class="main">
          <scroll-view scroll-y style="height: 100vh;">
            <view class="margin-lr fb paddingTopbom30">视频解析</view>

            <view class="videoimg" @click.stop="fullScreen">
              <video id="videoControl" :src="videoSrc" title="视频解析" @fullscreenchange="fullscreenchange" controls v-if="isShow"
                @error="error">
                <cover-view class="iconfont icon-bofang position-center"></cover-view>
               
              </video>

            </view>
            <view class="line"></view>
            <view class="margin-lr paddingTopbom30">
              <view class="fb">解析</view>
              <view class="txt-indent paddingTopbom30 color33">
                <jyf-parser :html="detail.answerAnalysis" ref="article"></jyf-parser>
              </view>
            </view>
            <view class="line"></view>
            <view class="margin-lr">
              <view class="fb paddingTopbom30">知识点</view>
              <view class="txt-indent color33" v-for="(item,index) in detail.knowList" :key="index">
                <text>{{item.knowledgePointName}}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-transition>

  </view>
</template>

<script>
  import uniTransition from '@/components/uni-ui/uni-transition/uni-transition.vue'
  export default {
    components: {
      'uni-transition': uniTransition
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      detail: Object
    },
    watch: {
      show: {
        handler(newVal) {
          this.isShow = newVal
        },
      },
      detail: function(val) {
        // console.log('解析',val)
        this.cacheVideo()
      }
    },
    data() {
      return {
        isShow: false,
        transClass: {
          'position': 'fixed',
          'left': 0,
          'right': 0,
          'height': '100%',
          'z-index': 999
        },
        videoSrc: ''
      };
    },
    created() {
      this.videoContext = uni.createVideoContext('videoControl')
    },
    methods: {
      cacheVideo(){
        if (this.detail.videoUrl) {
          const videoData = uni.getStorageSync(this.$md5(this.detail.videoUrl))
          // 判断是否有缓存  
          if (videoData) {
            console.log('我是视频-有缓存')
            console.log(videoData)
            this.videoSrc = videoData
          } else {
            console.log('我是视频-没有有缓存')
            this.videoSrc = this.detail.videoUrl // 我是在线链接  
            // 下载视频  
            this.$utils.downFile(this.detail.videoUrl, this.$md5);
          }
        }
      },
      onTap() {
        this.isShow = false
        this.$emit('update:show', false)
      },
      // 点击全屏
      fullScreen() {
        if (this.detail.videoUrl) {
          this.videoContext.requestFullScreen()
          this.videoContext.play()
        } else {
          this.$showToast('未添加视频地址')
        }

      },
      // 监听退出全屏
      fullscreenchange(e) {
        if (!e.detail.fullScreen) {
          this.onTap()
        }
      },
      error(e) {
        if (!this.detail.videoUrl) {
          this.$showToast('视频地址出错')
        }

      }
    }
  }
</script>

<style lang="scss">
  .sliderRight {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    // width: 100%;
  //   transition-timing-function: ease;
		// transition-duration: 0.3s;
		// transition-property: transform;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba($color: #000000, $alpha: 0.5);
    }

    .main {
      position: relative;
      float: right;
      width: 60%;
      // height: 100%;
      border-radius: 10upx 0 0 10upx;
      background-color: #ffffff;
      font-size: px2vw(30);

      .title {
        margin-top: px2vh(50);

        text {
          text-align: center;
        }

        .icon-cuo {
          padding: px2vw(10);
          font-size: px2vw(18);
        }
      }

      .videoimg {
        position: relative;
        border-radius: 8px;
        margin: px2vh(30) px2vw(80);
        video {
          width: px2vw(800);
          height: px2vw(450);
        }

        .icon-bofang {
          color: #ffffff;
          font-size: px2vw(50);
        }
      }

      .line {
        height: px2vh(16);
        background: #F5F6FA;
      }

      .txt-indent {
        text-indent: 2em;
        font-size: px2vw(28);
      }
    }
  }
</style>
